<template>
  <div class="com-header">
    <div class="top container">
      <div class="list list-last"><p>服务热线：13980287990</p></div>
      <!-- <a class="list" href="#"><p>在线留言</p></a> -->
      <!-- <a class="list" href="javascript:window.external.AddFavorite('http://mountainfreshes.cdsok.com.cn/', '山鲜王|凉山远瞻商贸有限责任公司')"><p>加入收藏</p></a>
      <a class="list" href="javascript: void(0);" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.baidu.com');"><p>设为首页</p></a> -->
    </div>
    <div class="mid container">
      <div class="logo">
        <img :src="logo" alt="">
      </div>
      <div class="ss-box">
        <div class="ss-box-top">
          <label for="search"><i class="el-icon-search"></i></label>
          <input id="search" type="text" name="search" v-model="search" placeholder="搜索你喜欢的商品">
          <div class="btn" v-on:click="ss()">搜索</div>
        </div>
        <div class="ss-box-down">
          <p>热卖搜索：
            <span class="a" @click="hotss($event)">枇杷</span>
            <span class="a" @click="hotss($event)">桑葚</span>
            <span class="a" @click="hotss($event)">樱桃</span>
          </p>
        </div>
      </div>
      <div class="islogin">
        <div class="logined" v-if="this.$store.state.userid">
          <div class="left">
            <router-link to="/person/myshopcar">
            <i class="icon iconfont icon-gouwuche"></i>
            <sup v-show="this.$store.state.shopcartnum"><p>{{this.$store.state.shopcartnum}}</p></sup>
            </router-link>
          </div>
          <div class="right">
            <div class="btn">
              <div class="name">
                <router-link to="/person">{{this.$store.state.username}}</router-link>
              </div>
              <i class="el-icon-arrow-down"></i>
            </div>
            <div class="xl_box">
              <div class="list"><router-link to="/person">个人中心</router-link></div>
              <div class="list"><router-link to="/person/order">我的订单</router-link></div>
              <div class="list" @click="logout()">退出登录</div>
            </div>
          </div>
        </div>
        <div class="nologin" v-else>
          <div class="img-bg">
            <img :src="img_bg" alt="">
          </div>
          <p class="p1">更多惊喜请<router-link to="/login">登录</router-link></p>
          <p class="p2">还没<router-link to="/reg">注册</router-link>点这里哦</p>
        </div>
        
      </div>
    </div>
    <div class="down container">
      <router-link to="/" exact>首页</router-link>
      <router-link to="/limit">当季鲜果</router-link>
      <router-link to="/fresh">鲜果汇</router-link>
      <router-link to="/specialty">凉山特产</router-link>
      <router-link to="/distribution">分销购</router-link>
      <router-link to="/news">鲜果资讯</router-link>
      <router-link to="/about">关于我们</router-link>
    </div>
    <div class="com-fixed-right-box">
      <a class="item" href="tel:13980287990">
        <i class="icon iconfont icon-dianhua"></i>
        <p>热线电话</p>
        <div class="showbox">
          <p>热线电话：</p>
          <p><a href="tel:13980287990">13980287990</a></p>
          <p><a href="tel:0834-5116789">08345116789</a></p>
        </div>
      </a>
      <router-link class="item" to="/person/myshopcar" style="position: relative;">
            <i class="icon iconfont icon-gouwuche"></i>
            <sup v-show="this.$store.state.shopcartnum"><p>{{this.$store.state.shopcartnum}}</p></sup>
            <p>购物车</p>
      </router-link>
      <a class="item" target="_bank" href="http://wpa.qq.com/msgrd?v=3&uin=280964281&site=qq&menu=yes">
        <i class="icon iconfont icon-kefu"></i>
        <p>在线客服1</p>
      </a>
      <a class="item" target="_bank" href="http://wpa.qq.com/msgrd?v=3&uin=3598795683&site=qq&menu=yes">
        <i class="icon iconfont icon-kefu"></i>
        <p>在线客服2</p>
      </a>
      <a class="item" target="_bank" href="http://wpa.qq.com/msgrd?v=3&uin=439989060&site=qq&menu=yes">
        <i class="icon iconfont icon-kefu"></i>
        <p>在线客服3</p>
      </a>
      
            
      <!-- <a class="item" href="javascript:void(0);" @click="gotop()">
        <i class="icon iconfont icon-msnui-top"></i>
        <p>回到顶部</p>
      </a> -->
    </div>
  </div>
</template>

<script>
import logo_img from '@/assets/image/logo.png'
import img_bg from '@/assets/image/img-bg.png'
import qs from "qs"
export default {
  name: 'App',
  data(){
    return{
      logo: logo_img,
      img_bg: img_bg,
      search:'',
      url: 'http://m.mountainfreshes.com/',
    }
  },
  // props: ['islogin'],
  methods:{
    getshopcar:function(){
        if(this.$store.state.dlzt==1){
              this.$http.post("/index.php/user/cart/index",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  user_id: this.$store.state.userid

              }))
              .then(res => {
                this.$store.state.shopcartnum = res.data.row.length
                
              })
              .catch(error => {
                alert("网络错误")
              });
            }else{
            //   this.$confirm('你还没有登录, 不能购买', '提示', {
            //   confirmButtonText: '去登录',
            //   cancelButtonText: '先逛逛',
            //   type: 'warning'
            // }).then(() => {
            //   this.$router.push({ path: '/login' })
            // }).catch(() => {
                        
            // });
            }
    },
    ss:function(){
      this.$router.push({ name: 'searchpage', query:{cpid: this.search} })
      
    },
    hotss:function(e){
      this.search = e.target.innerText
      this.$router.push({ name: 'searchpage', query:{cpid: this.search} })
    },
    logout:function(){
      this.$http.get("/index.php/index/user/logout")
      .then(res => {
        this.$store.state.dlzt = -1;
        console.log(this.$store.state.dlzt)
        localStorage.clear();
        this.$store.state.dlzt = ''
        this.$store.state.username = ''
        this.$store.state.userid = ''
      })
      .catch(error => {
        
      });
    },
    gotop:function(){
      let back = setInterval(() => {
          if(document.body.scrollTop||document.documentElement.scrollTop){
            document.body.scrollTop-=100;
            document.documentElement.scrollTop-=100;
          }else {
            clearInterval(back)
          }
        });
    },
      _isMobile() {
        let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
        return flag;
      }
  },
  created(){
    this.$store.state.dlzt = localStorage.dlzt;
    this.$store.state.username = localStorage.name;
    this.$store.state.userid = localStorage.userid;
    this.getshopcar();
    if(this._isMobile()){
        window.location.href = this.url
    };
  },
  mounted(){
    if(this._isMobile()){
        window.location.href = this.url
    };
  }
}
</script>
<style  >
  .com-message-tc{
    top: 50%;
    margin-top: -20px;
  }
</style>
<style scoped lang="less">
.com-header{
  width: 100%;
  height: 190px;
  float: left;
  .top{
    height: 18px;
    text-align: right;
    margin-top: 20px;
    .list{
      height: 100%;
      float: right;
      display: block;
      border-right: 1px solid #cdcdcd;
      
      p{
        font-size: 12px;
        color: #716c6c;
        line-height: 18px;
        padding: 0 8px;

      }
    }
    .list-last{
      border-right: none;
    }
  }
  .mid{
    height: 94px;
    .logo{
      float: left;
      height: 94px;
      margin-left: 20px;
      img{
        display: block;
        height: 100%;
      }
    }
    .ss-box{
      width: 608px;
      float: left;
      height: 70px;
      margin-top: 20px;
      margin-left: 152px;
      .ss-box-top{
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        border: 1px solid #54b84c;
        border-radius: 6px;
        overflow: hidden;
        label{
          font-size: 20px;
          line-height: 38px;
          color: #717171;
          padding-left: 10px;
          cursor: pointer;
          float: left;
        }
        input{
          display: block;
          width: 460px;
          height: 100%;
          border: none;
          outline: none;
          float: left;
          margin-left: 14px;
          font-size: 14px;
          color: #656161;
        }
        .btn{
          float: right;
          width: 72px;
          height: 100%;
          font-size: 16px;
          color: #fff;
          text-align: center;
          line-height: 38px;
          background: #54b84c;
          cursor: pointer;
        }
      }
      .ss-box-down{
        width: 100%;
        height: 30px;
        p{
          font-size: 12px;
          padding-top: 10px;
          color: #020202;
          .a{
            color: #2b6e26;
            padding-left: 6px;
          }
        }
      }
    }
    .islogin{
      width: 206px;
      float: right;
      height: 54px;
      margin-top: 16px;
      .nologin{
        width: 100%;
        height: 100%;
        position: relative;
        .img-bg{
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1; 
        }
        p{
          font-size: 14px;
          color: #54b84c;
          a{
            color: #ee4b5a;
          }
        }
        .p1{
          padding-left: 30px;
          padding-top: 9px;
        }
        .p2{
          text-align: right;
          padding-right: 30px;
          padding-top: 0px;
        }
      }
      .logined{
        width: 206px;
        float: right;
        height: 32px;
        .left{
          float: left;
          width: 40px;
          height: 100%;
          margin-top: 8px;
          line-height: 32px;
          position: relative;
          i{
            font-size: 30px;
            color: #54b84c;
            text-align: center;
          }
          sup{
            position: absolute;
            right: 0;
            top: 0;
            background: red;
            height: 16px;
            text-align: center;
            line-height: 16px;
            border-radius: 8px;
            color: #fff;
            p{
              padding: 0 6px;
              font-size: 12px;
            }
          }
        }
        .right{
          width: 150px;
          height: 30px;
          margin-top: 8px;
          float: right;
          border: 1px solid #d6d6d6;
          cursor: pointer;
          position: relative;
          .name{
            width: 110px;
            height: 100%;
            float: left;
            line-height: 30px;
            margin-left: 8px;
            a{
              font-size: 14px;
              color: #282828;
            }
          }
          i{
             font-size: 18px;
             float: right;
             line-height: 30px;
             color: #666;
             margin-right: 6px;
          }
          &:hover{
            i{
              color: #54b84c;
            }
            .xl_box{
              display: block;
            }
          }
          .xl_box{
            display: none;
            position: absolute;
            width: 100%;
            height: auto;
            zoom: 1;
            top: 30px;
            border: 1px solid #d6d6d6;
            background: #fff;
            left: -1px;
            z-index: 999999999;
            .list{
              width: 100%;
              height: 30px;
              text-align: center;
              line-height: 30px;
              color: #333;
              font-size: 14px;
              &:first-child{
                margin-top: 6px;
              }
              &:last-child{
                margin-bottom: 6px;
              }
              a{
                color: #333;
                font-size: 14px;
                &:hover{
                  color: #54b84c;
                }
              }
            }
          }
        }
      }
    }
  }
  .down{
    height: 38px;
    margin-top: 10px;
    a{
      display: block;
      width: 122px;
      height: 100%;
      float: left;
      border-radius: 10px;
      background: #fff;
      color: #000;
      font-size: 16px;
      text-align: center;
      line-height: 38px;
      margin-left: 57px;
      &:first-child{
        margin-left: 0;
      }
    }
    .router-link-active{
      background: #54b84c;
      color: #fff;
    }
  }
}
.com-fixed-right-box{
  position: fixed;
  z-index: 9999999;
  right: 10px;
  top: 50%;
  width: 70px;
  margin-top: -144px;
  .item{
    display: block;
    width: 100%;
    height: 70px;
    background: #5bb756;
    text-align: center;
    margin-bottom: 2px;
    &:hover{
      .showbox{
        display: block;
      }
    }
    .showbox{
      display: none;
      position: absolute;
      background: #fff;
      z-index: 1;
      right: 70px;
      top: 0;
      background: #5bb756;
      padding: 8px 16px 8px 8px;
      border-right: 2px solid #fff;
      p{
        text-align: left;
        padding-top: 8px;
        font-size: 14px;
        a{
          color: #fff;
        }
      }
    }
    i{
      font-size: 30px;
      color: #fff;
      margin-top: 8px;
      display: block;
      float: left;
      text-align: center; 
      width: 100%;
    }
    p{
      font-size: 13px;
      color: #fff;
    }
    sup{
            position: absolute;
            right: 0;
            top: 0;
            background: red;
            height: 16px;
            text-align: center;
            line-height: 16px;
            border-radius: 8px;
            color: #fff;
            p{
              padding: 0 6px;
              font-size: 12px;
            }
          }
  }
}
</style>
